<template>
    <div class="res_info" v-if="r_info&&r_info.pic_list">
      <div class="empty sjj hide">
        <img src="../assets/hello.png" alt="">
        <div class="word">
          <p class="p1">没有留下店铺信息</p>
          <p class="p2">
            请点击下方的“继续点菜”按钮开始点菜
          </p>
        </div>
      </div>

      <div class="r_logo">
        <img :src="r_info.r_logo" alt="">
      </div>
      <div class="r_name">{{ r_info.r_name }}</div>
      <div class="r_pic item" >
        <i class="pre_btn" @click="clickPre"></i>
        <img :src="r_info.pic_list[nowIndex].r_pic_url" alt="">
        <i class="next_btn" @click="clickNext"></i>
      </div>
      <div class="r_info item">
        <p class="address">地址: {{ r_info.r_location }}</p>
        <p class="phone">电话: {{ r_info.phone }}</p>
        <p class="price">人均: {{ r_info.price }}</p>
        <p class="time">营业: {{ r_info.opening }}</p>
      </div>
      <div class="tsbq item">
        <p class="title_tsbq">特色标签</p>
        <ul>
          <li v-for="item  in r_info.label_list">{{ item.label_name }}</li>

        </ul>
      </div>
      <div class="desc item">
        <p class="title_desc">店铺简介</p>
        <p class="desc_detail">{{ r_info.detail }}</p>


      </div>



      <div class="bottom_btns">
        <div class="b_btn btn_nav" @click="showNav">
          <i></i>
          导航
        </div>
        <router-link :to="{path: '/dishesList'}" >
          <div class="b_btn btn_jxdc">
            <i></i>
            继续点菜
          </div>
        </router-link>
      </div>

      <div class="mask">
      </div>
      <div class="nav_detail">
        <ul>
          <li class="dpxx" @click="hideNav">
            <span>店铺信息</span>
          </li>
          <li class="cd" @click="gocd">
            <span>菜单</span>
          </li>
          <li class="gwc" @click="gogwc">
            <span>购物车</span>
          </li>
          <li class="ydgdc" @click="goydgdc">
            <span>已下单的菜</span>
          </li>
          <li class="jz" @click="gojz">
            <span>结账</span>
          </li>
          <li class="fh" @click="hideNav">
            <span>返回</span>
          </li>
        </ul>
      </div>
      <div class="bg"></div>
    </div>
</template>

<script>
    export default {
      data (){
        return{
          r_info:{},
          nowIndex:0,
          pic_len:0
        }
      },
      beforeCreate  (){
        this.$http.get(this.kdUrl.url_host+'version=1&resource=restaurant&method=restaurant&token=' + localStorage.getItem("kd_token")).then((res) => {
          console.log('dp')
          console.log(res)
          this.r_info = res.body.data
          this.pic_len = res.body.data.pic_list.length
        },(err) => {

        })
      },
      methods:{
        showNav (){
          $('.mask').fadeIn()
          $('.nav_detail').fadeIn()
        },
        hideNav (){
          $('.mask').fadeOut()
          $('.nav_detail').fadeOut()
        },
        godpxx (){
          this.$router.push('/restaurantInfo')
        },
        gocd (){
          this.$router.push('/dishesList')
        },
        gogwc (){
          this.$router.push('/shoppingCart')
        },
        goydgdc (){
          this.$router.push('/order')
        },
        gojz (){
          this.$router.push('/order')
        },
        clickPre (){
          if(this.nowIndex == 0){
            this.nowIndex = this.pic_len-1
          }else {
            this.nowIndex--
          }
        },
        clickNext (){
          if(this.nowIndex == this.pic_len-1){
            this.nowIndex = 0
          }else {
            this.nowIndex++
          }
        }
      }

    }
</script>

<style scoped>
  .res_info{
    padding: 0 2.5% 80px;
    color: #666;
  }
  .r_logo{
    text-align: center;
    margin: 15px 0;
  }
  .r_logo img{
    height: 45px;
    width: 45px;
    border-radius: 5px;
  }
  .r_name{
    text-align: center;
    color: #fff;
    font-size: 16px;
    margin-bottom: 20px;
  }
  .item{
    border-radius: 10px;
    margin-bottom: 20px;
    overflow: hidden;
  }
  .r_pic{
    height: 200px;
    position: relative;
  }
  .pre_btn{
    position: absolute;
    top: 95px;;
    left: 10px;
    width: 20px;
    height: 20px;
    border-top:2px solid #fff;
    border-left:2px solid #fff;
    transform: rotate(-45deg);
  }
  .next_btn{
    position: absolute;
    top: 95px;;
    right: 10px;
    width: 20px;
    height: 20px;
    border-top:2px solid #fff;
    border-right:2px solid #fff;
    transform: rotate(45deg);
  }
  .r_pic img{
    width: 100%;
    height: 100%;
  }
  .r_info{
    background: #c0bab7;
    padding: 0 10px;
    font-size: 14px;
  }
  .r_info p{
    padding-left: 30px;
    border-bottom: 1px solid #afa8a8;
    color: #666;
    line-height: 45px;
    position: relative;

  }
  .r_info p:before{
    content: '';
    position: absolute;
    top: 11px;;
    left: 0;
    width: 18px;
    height: 20px;
    background-image: url('../assets/dppics.png');
    background-repeat: no-repeat;
    background-size: 26px 223px;
    background-position: -2px -115px;
  }
  .r_info p.address:before{
    height: 22px;
    top: 14px;
    background-position: -2px -87px;
  }
  .r_info p.price:before{
    width: 22px;
    top: 18px;
    background-position: -2px -145px;
  }
  .r_info p.time:before{
    width: 22px;
    height: 22px;
    top: 11px;;
    background-position: -2px -167px;
  }
  .tsbq{
    background: #c0bab7;
    padding: 0 10px;
  }
  .title_tsbq,.title_desc{
    padding-left: 30px;
    margin-bottom: 10px;
    border-bottom: 1px solid #afa8a8;
    height: 40px;
    line-height: 39px;
    font-size: 14px;
    position: relative;
  }
  .title_tsbq:before,.title_desc:before{
    content: '';
    position: absolute;
    top: 12px;;
    left: 0;
    width: 20px;
    height: 20px;
    background-image: url('../assets/dppics.png');
    background-repeat: no-repeat;
    background-size: 26px 223px;
    background-position: -2px -6px;
  }
  .title_desc:before{
    top:9px;
    background-position: -2px -197px;
  }
  .tsbq ul{
    overflow: hidden;
  }
  .tsbq ul li{
    float: left;
    margin-right: 15px;
    margin-bottom: 15px;
    height: 22px;
    line-height: 20px;
    border:1px solid #afa8a8;
    border-radius: 11px;
    padding: 0 15px;
  }
  .desc{
    background: #c0bab7;
    padding: 0 10px;
  }
  .desc_detail{
    text-align: justify;
    width: 100%;
    padding-bottom: 10px;
    line-height: 20px;
    word-break:break-all;
  }

 .empty{
    margin-top: 20px;
    height: 130px;
    padding: 15px 2% 10px 10%;
    background: #fff;
  }
  .empty img{

    width: 25%;
    vertical-align: middle;
  }
  .word{
    display: inline-block;
    vertical-align: middle;
    padding-left: 10%;
    width: 73%;
  }
  .word .p1{
    font-size: 18px;
    margin-bottom: 10px;
    width: 100%;
  }
  .word .p2{
    width: 100%;
    font-size: 14px;
    color: #999;
  }

  .bottom_btns{
    height: 60px;
    width: 100%;
    position: fixed;
    bottom: 20px;
    left: 0;
  }
  .b_btn{
    position: absolute;
    top:0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border:2px solid #fff;
    text-align: center;
    padding-top: 28px;
    background: #313131;
    color: #fff;
    font-size: 12px;
  }

  .btn_jxdc{
    background: #ce2101;
    right: 2.5%;

  }


  .btn_nav{
    left: 2.5%;
  }
  .btn_jxdc i,.btn_order i,.btn_nav i{
    position: absolute;
    width: 30px;
    height: 25px;
    background-image: url('../assets/theme_dark.png');
    background-repeat: no-repeat;
    background-size: 600px 720px;
  }
  .btn_jxdc i{
    top: 6px;
    left: 13px;
    background-position: -416px -372px;
  }
  .btn_order i{
    top: 7px;
    left: 15px;
    background-position: -227px -374px;
  }
  .btn_nav i{
    top: 5px;
    left: 15px;
    background-position: -129px -276px;
  }
</style>
